{extends file="../acp.html"}

{block name="title"}{$head_title}{/block}
{block name="content"}
<div class="t-n-s-top">
    <div class="tables-searchbox">
        <form method="post">
            <div class="mgt10">
                <span class="tbs-txt">园区名：</span>
                <select name="incubator_id" class="incubator" id="province_id">
                    <option value="">--园区名--</option>
                    {foreach from=$incubator_list item=item}
                    <option value="{$item.incubator_id}" {if $item.incubator_id == $incubator_id}selected{/if}>{$item.incubator_name}</option>
                    {/foreach}
                </select>
                <span class="tbs-txt">楼层：</span>
                <select name="storey_id" class="storey" id="storey_id">
                    <option value="">--楼层--</option>
                    {foreach from=$storey_list item=item}
                    <option value="{$item.storey_id}" {if $item.storey_id == $storey_id}selected{/if}>{$item.storey_name}</option>
                    {/foreach}
                </select>
                <span class="tbs-txt">工位：</span>
                <select name="station_class_id" class="station" id="station_class_id">
                    <option value="">--工位--</option>
                    {foreach from=$station_class_list item=item}
                    <option value="{$item.station_class_id}" {if $item.station_class_id == $station_class_id}selected{/if}>{$item.class_name}</option>
                    {/foreach}
                </select>
            </div>
            <!-- <div class="mgt10">
                <span class="tbs-txt">添加时间：</span>
                <input type="text" autocomplete="off" class="Wdate" name="start_date" value="{$start_date|date_format:'%Y-%m-%d'}"  onclick="WdatePicker()">
                <span class="tbs-txt">至</span>
                <input type="text" autocomplete="off" class="Wdate" name="end_date" value="{$end_date|date_format:'%Y-%m-%d'}"  onclick="WdatePicker()">
                <input type="hidden" name="act" value="search">
            </div> -->
            <button type="submit" class="btn"><i class="gicon-search"></i>搜索</button>
        </form>
    </div>

    <div id="park_container"></div>
    
    <div id="park_surrender" style="min-width:400px;height:400px"></div>
</div>
{/block}

{block name="js"}
<script type="text/javascript" src="/Public/Plugins/Highcharts/highcharts.js?version={$version}"></script>
<script src="/Public/Plugins/My97DatePicker/WdatePicker.js?version={$version}"></script>

<script>
    var total_station_sum = parseInt('{$total_station_num}');//总工位
    var station_sum = parseInt('{$contract_station_num}');//已租工位
    var left_station_sum = parseInt('{$left_station_num}');//剩余工位
</script>
{literal}
<script>
    $('.incubator').change(function () {
        var incubator_id = $(this).val();
        $.ajax({
            type:'post',
            url:'/AcpStorey/get_ajax_storey',
            data:{"incubator_id":incubator_id},
            success:function (r) {
                var html ='<option value="">--请选择--</option>'
                if(r  != null){
                    for(var i= 0 ;i < r.length ; i++){
                        html +='<option value="'+r[i].storey_id+'">'+r[i].storey_name+'</option>'
                    }
                }
                $('.storey').html(html);
            }
        })
    })

    $('.storey').change(function () {
        var storey_id = $(this).val();
        $.ajax({
            type:'post',
            url:'/AcpStorey/get_ajax_station',
            data:{"storey_id":storey_id, opt:'zhongchuang_contract'},
            success:function (r) {
                var html ='<option value="">--请选择--</option>'
                if(r!=null){
                    for(var i= 0 ;i < r.length ; i++){
                        html +='<option value="'+r[i].station_class_id+'" data-price="'+r[i].price+'">'+r[i].class_name+'</option>'
                    }
                }
                $('.station').html(html);
            }
        })
    })

    $(function () {
        $('#park_container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '众创空间工位租凭情况统计．'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.y}个</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y}个',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '众创空间工位租凭情况统计．',
                data: [{
                    name: '已租工位数',
                    y: station_sum ,
                    sliced: true,
                    selected: true
                }, {
                    name:'未租工位数',
                    y:left_station_sum }
                ]
            }]
        });
    });


</script>
{/literal}
{/block}

{block name="css"}
<link rel="stylesheet" href="/Public/Css/acp/AcpOrder/order_num_stat.css" type="text/css" />
{/block} 
